<script setup>
import {ref} from "vue";

let message = ref("Hello, World!")

// 变量存储是外部样式类名称
const colorActive = ref("active")

const lineActive = ref("line")

</script>

<template>
  <h2 :class="colorActive">{{ message }}</h2>
  <h2 :class="lineActive">{{ message }}</h2>
</template>

<style scoped>
.active {
  color: red;
}

.line {
  text-decoration: underline
}
</style>